<template>
  <view class="bg-#ffffff">
    <mt-navbar title="易盟尊享计划" :bg-color="userInfo.goldChannelFlag === 0 ? '#f7f7f7' : '#ffffff'"> </mt-navbar>
    <view v-if="userInfo.goldChannelFlag === 0" class="member-center">
      <view class="member-center-top flex items-center px-32rpx py-22rpx">
        <image
          class="w-100rpx h-100rpx rd-100rpx"
          :src="userInfo.avatarUrl ? userInfo.avatarUrl : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'"
        ></image>
        <view class="flex-1 min-w-0 ml-24rpx">
          <view class="flex items-center">
            <text class="text-32rpx text-#1C213E font-bold">{{ userInfo.providerName || '默认昵称' }}</text>
            <text class="text-24rpx text-#1C213E px-16rpx py-2rpx rd-4rpx ml-32rpx bg-#ffffff">盟友</text>
          </view>
          <view class="text-24rpx text-#727687">您暂未成为盟友合伙人，请升级后享受权益吧！</view>
        </view>
      </view>

      <view class="bg-#f7f7f7 mb-28rpx">
        <view class="bg-#ffffff px-32rpx pt-40rpx" style="border-radius: 32rpx 32rpx 0 0">
          <view class="text-32rpx text-#1C213E font-bold">盟友专属推荐</view>
        </view>
      </view>
      <view class="card mx-32rpx mb-40rpx rd-8rpx px-32rpx pt-32rpx pb-26rpx">
        <image class="w-116rpx h-74rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/memberCenter1.png"></image>
        <image
          class="w-124rpx h-40rpx absolute right-0 top-0"
          src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/memberCenter2.png"
        ></image>
        <view class="flex-1 min-w-0 ml-24rpx">
          <view class="text-32rpx text-#231F18 font-bold mb-10rpx">升级盟友合伙人</view>
          <view class="text-24rpx text-#886D53 mb-12rpx">限时特惠</view>
          <view class="flex items-end">
            <text class="text-48rpx text-#503716 font-bold mr-10rpx">{{ goldChannelAmount }}</text>
            <text class="text-28rpx text-#503716 pb-6rpx">元</text>
          </view>
        </view>
      </view>
      <view class="text-32rpx text-#231F18 font-bold mb-32rpx px-32rpx">盟友合伙人权益说明</view>
      <view class="desc px-32rpx">
        <text class="text-#1C213E text-28rpx fw-400">{{ interestsInfo.equityDescription }}</text>
      </view>
    </view>

    <view v-if="userInfo.goldChannelFlag === 1" class="min-h-100vh pb-130rpx">
      <goldChannelInvitation ref="qrcodeRef"></goldChannelInvitation>
      <view class="text-32rpx text-#231F18 font-bold mb-32rpx px-32rpx">您在享受多项权益</view>
      <view class="desc px-40rpx">
        <text class="text-#1C213E text-28rpx fw-400">{{ interestsInfo.equityDescription }}</text>
      </view>
    </view>

    <view
      v-if="userInfo.goldChannelFlag === 0"
      class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2"
    >
      <mt-button class="sub-btn" shape="circle" @click="handleGoldMedalChannel">成为盟友合伙人</mt-button>
      <image
        class="w-254rpx h-40rpx absolute right-32rpx top-0"
        src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/memberCenter3.png"
      ></image>
    </view>
    <view
      v-if="userInfo.goldChannelFlag === 1"
      class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2"
    >
      <mt-button class="sub-btn" shape="circle" @click="handleSaveQrCode">保存二维码至相册</mt-button>
    </view>
    <!--支付-->
    <mt-pay-popup ref="payPopupRef" @confirm="handlePayConfirm"></mt-pay-popup>
  </view>
</template>

<script name="memberCenter" setup>
import userStore from '@/store/user';
import { onLoad } from '@dcloudio/uni-app';
import goldChannelInvitation from '@/subMember/pages/components/gold-channel-invitation';
import { getGoldChannelSetting, createGoldChannelOrder } from '@/subMember/api/index.js';
import { appleappleBecomeChannelAgent } from '@/api/common';
import { initiationPayments } from '@/utils/tools.js';

const user = userStore();

const { userInfo } = user;

const payPopupRef = ref(null);

// 金牌渠道费用
const goldChannelAmount = ref(0);

// 成为永久渠道商
const handleGoldMedalChannel = () => {
  payPopupRef.value.open({
    amount: goldChannelAmount.value * 1000
  });
};

const qrcodeRef = ref();
function handleSaveQrCode() {
  qrcodeRef.value.handleSaveQrCode();
}

// 关闭支付窗口
const handleCloseMedalChannel = () => {
  payPopupRef.value.close();
};

const loading = ref(false);
// 确认支付回调
const handlePayConfirm = async (payType) => {
  if (loading.value) {
    return;
  }
  try {
    loading.value = true;
    const params = {
      paymentChannel: payType,
      payVoucher: '[]'
    };
    if (payType === 1 || payType === 2) {
      const { data } = await createGoldChannelOrder(params);
      const info = data.orderStr;
      await initiationPayments(payType, info, '/pages/common/waterPay?type=member');
      uni.redirectTo({
        url: '/pages/my/index'
      });
    } else if (payType === 3) {
      uni.redirectTo({
        url: '/pages/common/waterPay?type=member'
      });
    } else if (payType === 100) {
      await initiationPayments(payType);
      await appleappleBecomeChannelAgent();
      handleCloseMedalChannel();
      uni.showToast({
        title: '支付成功',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

const interestsInfo = ref({});
// 查询会员费用
const queryGoldChannelSetting = async () => {
  const { data } = await getGoldChannelSetting();
  goldChannelAmount.value = data.channelAgentPrice || 0;
  interestsInfo.value = data;
};

onLoad(() => {
  queryGoldChannelSetting();
});
</script>

<style lang="scss" scoped>
.member-center {
  min-height: 100vh;
  padding-bottom: 130rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  &-top {
    background: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-diamond.svg') no-repeat;
    background-position: right -30rpx;
    background-color: #f7f7f7;
  }
  .card {
    position: relative;
    display: flex;
    align-items: flex-start;
    background: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/memberCenter4.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
  }
}
.sub-btn.mt-button {
  width: 100%;
  color: #f6cb86;
  font-weight: bold;
  background-color: #231f18;
}
.desc {
  word-break: break-all;
  line-height: 42rpx;
  .dot {
    width: 12rpx;
    height: 12rpx;
    min-width: 12rpx;
    background-color: #727687;
    border-radius: 50%;
  }
}
</style>
